<!-- 
  @Author: Your name
  @Date:   2023-03-16 10:14:21
  @Last Modified by:   Your name
  @Last Modified time: 2023-03-16 10:40:42
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy"
        content="default-src *; connect-src * ws://* wss://*; style-src * 'unsafe-inline' 'unsafe-eval'; media-src * ; img-src * data:; font-src * ; script-src * 'unsafe-inline' 'unsafe-eval';" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cookies</title>
    <link rel="stylesheet" href="/static/colorui/main.css">
    <link rel="stylesheet" href="/static/element-ui.css">
</head>

<body>
    <div class="page-size-100 " id="app" v-cloak>
        <div class="padding-xs">
            <!-- 当前日期 -->
            <div class="text-xs margin-bottom-xs">
                当前日期 {{date}}
            </div>
            <div class="text-xs margin-bottom-xs">
                cookies总数 {{initData.length}}, 当前domian总数 {{domainList.length}}
            </div>
            <el-row>
                <el-select v-model="query.domain" filterable placeholder="请输入domain筛选" @change="getSearch" clearable>
                    <el-option v-for="item in domainList" :key="item.domain" :label="item.domain" :value="item.domain">
                    </el-option>
                </el-select>
                <el-select v-model="query.name" filterable placeholder="请输入name筛选" @change="getSearch" clearable>
                    <el-option v-for="item in initData" :key="item.name" :label="item.name" :value="item.name">
                    </el-option>
                </el-select>
                <el-button type="primary" @click="getSearch">搜索({{cookiesList.length}})</el-button>
                <el-button type="primary" @click="resetSearch">重置查询</el-button>
                <el-button type="primary" @click="handleCollectRemoveAll">清空收藏</el-button>
                <el-row class="margin-top-xs">
                    <!-- closable -->
                    <el-tag class="margin-right-xs" :key="tag" v-for="tag in collectionList" :disable-transitions="true"
                        @click="handleCollectDetail(tag)" @close="handleCollectRemove(tag)">
                        {{tag.name}}
                    </el-tag>
                </el-row>
            </el-row>
            <el-row class="margin-top">
                <el-table :data="cookiesList" border style="width: 100%" height="600">
                    <el-table-column type="index" label="序号" align="center" width="50"> </el-table-column>
                    <el-table-column prop="domain" sortable label="domain" align="center" width="200">
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="150">
                        <template slot-scope="scope">
                            <el-button size="mini"  @click="handleRemove(scope.$index, scope.row)">移除</el-button>
                            <el-button size="mini" @click="handleAddMark(scope.$index, scope.row)">收藏</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="键Key">
                        <template slot-scope="scope">
                            {{scope.row.name}}
                            <el-button size="mini" @click="handleCopy(scope.$index, scope.row.name)">复制Key</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="value" label="值Value">
                        <template slot-scope="scope">
                      
                            {{scope.row.value.length>50?scope.row.value.slice(0,50)+'....':scope.row.value}}
                            <el-button size="mini" @click="handleCopy(scope.$index, scope.row.value)">复制Value</el-button>
                        </template>
                    </el-table-column>

                    <el-table-column prop="value" label="value">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleAddCookies(scope.$index, scope.row.name)">写入</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-row>
        </div>
    </div>
    <script type="text/javascript" src="/static/vue.min.js"></script>
    <script type="text/javascript" src="/static/element-ui.js"></script>
    <script type="text/javascript" src="/JsTools/clipboard.min.js"></script>
    <script type="text/javascript" src="/JsTools/lodash.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>

</html>